<template>
      <div>
        <div class="add">
            编号：<input type="text" v-model="code">
            产品名称: <input type="text" v-model="productName" >
            <br>
            产品图片地址：<input type="text" v-model="imgsrc" >
            
            价格:<input type="text" v-model="price">
            <input type="button" value="添加" @click="handleClick">
        </div>
        <div class="add">
            品牌名称: <input type="text" placeholder="请输入名称">
        </div>

        <detail :products="products"></detail>
    </div>
</template>

<script>
let initData = (
    [
                    {
                        id:Math.random().toString(16).substring(2),
                    imgsrc:"https://img0.baidu.com/it/u=2636633720,2705136804&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=643",
                    code:"1122",
                    count:1,
                    productName:"吴签的签",
                    price:0.1
                },
                {
                    id:Math.random().toString(16).substring(2),
                    imgsrc:"https://img2.baidu.com/it/u=3774311998,2769833858&fm=253&fmt=auto&app=120&f=JPEG?w=640&h=378",
                    code:"1123",
                    count:1,
                    productName:"品如的衣柜",
                    price:100
                },
                {
                    id:Math.random().toString(16).substring(2),
                    imgsrc:"https://img2.baidu.com/it/u=1288758119,3140755471&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500",
                    code:"1124",
                    count:1,
                    productName:"坤坤的球",
                    price:111
                },
                ]
)

import detail from './detail'
    export default {
        components:{
            detail
        },
    data(){
        return {
              imgsrc:"",
                    code:"",
                    count:1,
                    productName:"",
                    price:'',
            products: JSON.parse(localStorage.getItem('data')) ?? initData
        }
    },
    methods:{
        handleClick(){
            let obj ={
                id:Math.random().toString(16).substring(2),
                imgsrc:this.imgsrc,
                productName:this.productName,
                code:this.code,
                price:this.price,
                count:1
            }
            this.products.push(obj)
            localStorage.setItem('data',JSON.stringify(this.products))
        }
    }
        
    
    }
</script>

<style scoped>
    .add {
        padding: 5px;
        border: 1px solid black;
        margin: 10px;
    }
</style>